<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <script src="scripts/snap.svg.js"></script>
</head>

<body>
<svg  id="svgout" version="1.1"
     baseProfile="full"
     width="900" height="800"
     xmlns="http://www.w3.org/2000/svg">

<!--    <rect width="100%" height="100%" fill="red" />-->

<!--    <circle cx="400" cy="450" r="80" fill="green" />-->

<!--    <text x="400" y="480" font-size="60" text-anchor="middle" fill="white">SVG</text>-->

</svg>
    <script>
        let s = Snap("#svgout");
        let offset = 50;
        let g = s.g().attr({ stroke: 'gray' });
        for (let i = 0; i <=1600 / offset; i++) {
            g.line(i * offset, 0, i * offset, 1600)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.line(0, i * offset, 1600, i * offset)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.text(0, i * offset, i * offset);
            g.text(i * offset, 20, i * offset);
        }
    </script>
</body>

</html>